<template>
  <div class="app-container" style="overflow-y: auto">
    <h3 style="border-bottom:1px solid #ddd;padding-bottom:20px;" >新增/编辑城市留言</h3>
    <h5 v-if="editid">编辑{{form.title}}，只允许修改标题内容，若要重新分配负责人，请重建</h5>
    <div style="padding-bottom:20px;">
      <el-form label-position="top" label-width="80px">

        <el-form-item label="标题">
          <el-input placeholder="请输入标题" style="width:500px" v-model="form.title"/>
        </el-form-item>
        <el-form-item label="引言">
          <el-input type="textarea" placeholder="请输入引言" style="width:500px;" :rows="4" v-model="form.desc"/>
        </el-form-item>
        <el-form-item label="模板ID" v-if="editid==0">
<!--          <el-input  placeholder="" style="width:500px;" :rows="4" v-model="form.tpl"/>-->
          <el-select v-model="form.tpl">
            <el-option
              v-for="item in [{name:'县域专场',id:0}]"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择城市" v-if="editid==0">
          <el-cascader :options="baseData.leaderInfo" class="filter-item w-200" style="width:300px" clearable
                       filterable
                       placeholder="选择责任人" :props="{ expandTrigger: 'hover', checkStrictly: true }"
                       v-model="form.leader"
          ></el-cascader>
        </el-form-item>


        <el-form-item label="上传banner" style="position: relative">
          <el-upload
            class="upload-demo"
            drag
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

          </el-upload>
          <el-image :src="form.banner" style="height: 180px;position: absolute;top: 0;left: 400px;"
                    :preview-src-list="[form.banner]" fit="scale-down" v-if="form.banner"
          />
        </el-form-item>

        <div style="display: flex">
          <el-form-item label="背景配色">
            <el-color-picker v-model="form.color1"></el-color-picker>
          </el-form-item>

          <el-form-item label="主题色" style="margin-left:100px;">
            <el-color-picker v-model="form.color2"></el-color-picker>
          </el-form-item>

          <el-form-item label="辅助色" style="margin-left:100px;">
            <el-color-picker v-model="form.color3"></el-color-picker>
          </el-form-item>

          <el-form-item label="其他色" style="margin-left:100px;">
            <el-color-picker v-model="form.color4"></el-color-picker>
          </el-form-item>

        </div>
        <el-form-item style="border-top:1px solid #eee;padding-top:30px;">
          <el-button type="primary" @click="onSubmit">{{this.editid?'提交编辑':'立即创建'}}</el-button>
          <el-button style="margin-left:60px" @click="reset">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>

</template>

<script>
import { doPostTopicForm, getWzParams,getTopicForm } from '@/api/wz'
import Cookies from 'js-cookie'

export default {
  data() {
    return {
      editid:0,
      uploadUrl: 'https://wz.mala.cn/superAdmin.Count/douploadBanner?token=' + encodeURIComponent(Cookies.get('vue_admin_template_token')),
      baseData: {
        leaderInfo: []
      },
      form: {
        leader: '',
        banner: '',
        color1: '#9AD1CA',
        color2: '',
        color3: '',
        color4: '',
        title: '',
        desc: '',
        tpl:0
      }
    }
  },
  created() {
    this.fetchData()
    if(this.$route.query.id){
      this.editid = this.$route.query.id
      this.getTopic()
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.$set(this.form, 'banner', res.data)
    },
    beforeAvatarUpload(file) {
      if (!this.uploadUrl) {
        this.$message.error('请设置正确的图片上传地址!')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 10MB!')
      }
      return isLt2M
    },
    reset() {
      this.form = {
        leader: '',
        banner: '',
        color1: '',
        color2: '',
        color3: '',
        color4: ''
      }
    },
    getTopic(){
      getTopicForm({id:this.editid}).then(r=>{
        this.form.title = r.data.title
        this.form.editid =this.editid
        this.form.banner = r.data.banner
        this.form.color1 = r.data.color1
        this.form.color2 = r.data.color2
        this.form.color3 = r.data.color3
        this.form.color4 = r.data.color4
        this.form.desc = r.data.desc
      })
    },
    onSubmit() {
      doPostTopicForm({ data: this.form }).then(r => {
        if (r.code == 200) {
          this.$message({
            message: this.editid?'编辑成功':'创建成功',
            type: 'success'
          })
          this.$router.push({ path: '/form/city-list' })
        }
      })
    },
    fetchData() {
      let baseData = localStorage.getItem('wzbaseData')
      if (!baseData) {
        getWzParams().then(response => {
          this.baseData = response.data
          localStorage.setItem('wzbaseData', JSON.stringify(this.baseData))
        })
      } else {
        this.baseData = JSON.parse(baseData)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .el-form-item {
    margin-bottom: 20px;
  }
}
</style>
